<template>
  <div class="page_container">
    <div class="page_wrapper">
      <div class="page_content">
        <el-table :data="this.data">
          <el-table-column
          prop="uid"
          label="UID">
          </el-table-column>
          <el-table-column
          prop="nickname"
          label="昵称">
          </el-table-column>
          <el-table-column
          prop="avatar"
          label="头像">
          <template slot-scope="props">
            <viewer><img @click="showImg(props.row.avatar)" :src="props.row.avatar" width="40px"></viewer> 
          </template>
          </el-table-column>
          <el-table-column
          prop="mobile"
          label="电话">
          </el-table-column>
          <el-table-column
          prop="created_at"
          label="时间">
          </el-table-column>
          <el-table-column
          label="操作">
          <template slot-scope="props">
            <el-button @click="edit(props.row)">编辑</el-button>
            <el-button @click="removeIndex(props.$index)">删除</el-button>
          </template>
          </el-table-column>
        </el-table>  
      </div> 
    </div>  
      <el-pagination
        background
        popper-class
        layout="prev, pager, next"
        :page-size="7"
        :total="this.source.length"
        @current-change="changePage">
      </el-pagination> 
      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
         <el-form :model="form">
           <el-form-item label="用户名" >
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
         </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
            </div>
      </el-dialog>
            <IMG v-show="isShow" :img="img"/>
  </div>
</template>

<script>
import Vue from 'vue';
import IMG from "../../components/image";
export default {
  components:{
    IMG
  },
  data(){
    return{
      data:[],
      source:JSON.stringify(localStorage.getItem("dataList"))||[],
      startIndex:0,
      endIndex:7,
      form:{
        name:"",
        phone:"",
        id:"",
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      img:"",
      isShow:false
    }
  },
  mounted(){
    this.$axios.get("http://localhost:8080/list1.json").then(res=>{
      this.source = res.data;
      for(var i=this.startIndex;i<this.endIndex;i++){
        this.data.push(this.source[i])
      }
    })
  },
  methods:{
    edit(row){
      this.dialogFormVisible = true;
      this.form.name = row.nickname;
      this.form.phone = row.mobile;
      this.form.id = row.uid;
    },
    changePage(page){
      this.startIndex = (page-1)*7;
      this.endIndex = page*7;
      this.data = [];
      if(this.endIndex > this.source.length){
        this.endIndex = this.source.length
      }
      for(var i=this.startIndex;i<this.endIndex;i++){
        this.data.push(this.source[i])
      }
    },
    determine(){
      this.dialogFormVisible = false;
      this.source.forEach(el=>{
        if(el.uid == this.form.id){
          el.nickname = this.form.name
          el.mobile = this.form.phone
        }
      })
    },
    removeIndex(index){
      this.data.splice(index,1);
    },
    showImg(path){
      this.img = path;
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.page_container
{
  width: 100%;
  height: 100%;
}

.page_wrapper
{
  width: 100%;
  height: 80%;
  /* border: 1px solid red; */
  margin-top: 20px;
  overflow: scroll;
}


.page_content
{
  width: 100%;
  /* height: 3000px; */
  /* background-image: linear-gradient(#e66465, #9198e5) */
}

</style>